<template>
  <div class="element-ui-theme"  v-loading="loading">
    <el-button class="my-6 mx-auto block" type="primary" @click="changeTheme">切换主题</el-button>

    <el-row class="m-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
    </el-row>

    <el-row class="m-4">
      <el-button disabled>Default</el-button>
      <el-button type="primary" disabled>Primary</el-button>
      <el-button type="danger" disabled>Success</el-button>
    </el-row>

    <el-row class="m-4">
      <el-button disabled link>Default</el-button>
      <el-button type="primary" disabled link >Primary</el-button>
      <el-button type="danger" disabled link >Success</el-button>
    </el-row>

    <el-row class="m-4">
      <el-link type="primary" class="m-2">primary</el-link>
      <el-link type="success" class="m-2">success</el-link>
      <el-link type="primary" disabled class="m-2">primary</el-link>
    </el-row>

    <el-row class="m-4">
      <el-autocomplete
          v-model="state1"
          :fetch-suggestions="querySearch"
          clearable
          class="inline-input w-50"
          placeholder="Please Input"
      />
    </el-row>

    <el-row class="m-4">
      <el-cascader v-model="value" :options="options"  />
    </el-row>

    <el-row class="m-4">
      <el-checkbox v-model="checked1" label="Option 1" size="large" />
      <el-checkbox v-model="checked2" label="Option 2" size="large" />
      <el-checkbox v-model="checked1" label="Option 1" size="large" disabled />
    </el-row>

    <el-row class="m-4">
      <el-color-picker v-model="color1" />
    </el-row>

    <el-row class="m-4">
      <el-date-picker
          v-model="value1"
          type="date"
          placeholder="Pick a day"
      />
    </el-row>

    <el-row class="m-4">
      <el-radio-group v-model="f" class="ml-4">
        <el-radio label="1" size="large">Option 1</el-radio>
        <el-radio label="2" size="large">Option 2</el-radio>
        <el-radio label="1" size="large" disabled>Option 1</el-radio>
      </el-radio-group>
    </el-row>

    <el-row class="m-4">
      <el-badge :value="1" class="item" type="primary">
        <el-button>comments</el-button>
      </el-badge>
      <el-switch  class="mx-2.5" v-model="value1" />
      <el-select class="mx-6" v-model="f" clearable placeholder="Select">
        <el-option
            v-for="item in 6"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
      <el-pagination class="mx-2" layout="prev, pager, next" :total="50" />
    </el-row>

    <el-row class="m-4">
      <el-input v-model="f" placeholder="Please input" disabled class="my-5"/>
      <el-input v-model="f" placeholder="Please input"  class="my-5"/>
    </el-row>

    <el-row class="m-4">
      <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          list-type="picture-card"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar"  alt=""/>
        <el-icon   class="avatar-uploader-icon"></el-icon>
      </el-upload>
    </el-row>

  </div>
</template>
<script setup lang="ts">
const imageUrl = ref('');

const value1 = ref('');

const color1 = ref('#409EFF');

const checked1 = ref(true);
const checked2 = ref(false);

const value = ref([]);
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  }
];

let flg = true;

const loading = ref(false);
const f = ref('1');

const changeTheme = () => {
  loading.value = true;
  if (flg) {
    document.body.className = 'dark';
    console.log('output=>', document.body.className);
  } else {
    document.body.className = '';
  }
  flg = !flg;
  setTimeout(() => {
    loading.value = false;
  }, 800);
};

const state1 = ref('');

const querySearch = (queryString, cb) => {
  cb([
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
  ]);
};

</script>

<style scoped>
</style>
